<template>
  <view class="payment tn-safe-area-inset-bottom">
    <tn-navbar z-index="1" index-url="/pages/index" fixed :bottom-shadow="false"
      >收款管理</tn-navbar
    >
    <view class="payment-tabs">
      <tn-tabs :data="tabsData" :current="0" @change="tabClick"></tn-tabs>
    </view>
    <view class="payment-bank" v-show="currentIndex === 0">
      <view class="item tn-bg-main tn-flex-column" v-if="payment.bankName">
        <view class="item-top tn-flex-rows" @click="toAddBank">
          <view class="item-top-left tn-flex-1">
            <img
              :src="`https://yashangxuan.oss-cn-beijing.aliyuncs.com/bank.logo/resource/logo/${payment.bankCode}.png`"
            /> </view
          ><view class="item-top-right tn-flex-column tn-flex-5">
            <view class="item-text bank-name">{{ payment.bankName }}</view>
            <view class="item-text member-name">{{ payment.accountName }}</view>
          </view>
        </view>
        <view class="item-bottom">
          <view class="bank-no">{{ payment.accountNumber }}</view>
        </view>
      </view>
      <view class="add-bank" v-if="!payment.bankName">
        <tn-button type="primary" @click="toAddBank">添加银行卡</tn-button>
      </view>
    </view>
    <view class="payment-alipay" v-show="currentIndex === 1">
      <tn-image-upload
        ref="alipayUploadRef"
        :limit="1"
        :header="header"
        :action="action"
        :form-data="formData"
        @success="uploadSuccess"
      ></tn-image-upload>

      <view class="img-box" v-if="payment.alipay">
        <img :src="payment.alipay" />
      </view>
    </view>
    <view class="payment-wx" v-show="currentIndex === 2">
      <tn-image-upload
        ref="wxpayUploadRef"
        :limit="1"
        :header="header"
        :action="action"
        :form-data="formData"
        @success="uploadSuccess"
      ></tn-image-upload>
      <view class="img-box" v-if="payment.wxpay">
        <img :src="payment.wxpay" />
      </view>
    </view>
    <tn-toast ref="toast"></tn-toast>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";

import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
import TnTabs from "@/tuniao-ui/components/tn-tabs/src/Tabs.vue";
import TnButton from "@/tuniao-ui/components/tn-button/src/Button.vue";
import TnImageUpload from "@/tuniao-ui/components/tn-image-upload/src/ImageUpload.vue";
import TnToast from "@/tuniao-ui/components/tn-toast/src/Toast.vue";
import { useUserStore } from "@/tuniao-ui/store/user";
import { TabData } from "@/tuniao-ui/types";
import { api } from "@/config";
import { ResultEnum } from "@/enums/httpEnum";
import { Payment } from "./lib/Payment";
import { navPage } from "@/tuniao-ui/utils";

import {
  findPayment,
  updateAlipay,
  updateWxpay,
} from "@/api/payment";
import { onShow } from "@dcloudio/uni-app";

const userStore = useUserStore();

// tabs数据
const tabsData: TabData[] = [
  { title: "银行卡" },
  { title: "支付宝" },
  { title: "微信" },
];

const payment: Payment = reactive({
  id: 0,
  memberId: 0,
  bankCode: "",
  bankName: "",
  accountName: "",
  accountNumber: "",
  alipay: "",
  wxpay: "",
});

const currentIndex = ref(0);

const wxpayUploadRef = ref<InstanceType<typeof TnImageUpload>>();
const alipayUploadRef = ref<InstanceType<typeof TnImageUpload>>();

const toast = ref<InstanceType<typeof TnToast>>();

// 上传相关参数
const action: string = `${api.base}/buyer/uploader`;
const formData: Record<string, any> = {
  scene: "payment",
};
const header: Record<string, any> = {
  Authorization: `Bearer ${userStore.getToken}`,
};

function toAddBank() {
 navPage("/pages/mine/payment/addBank?bankInfo=" + encodeURIComponent(JSON.stringify(payment)));
}

function uploadSuccess(res: any, list: any) {
  if (res.code === ResultEnum.SUCCESS) {
    let img = res.result.url;

    // 1代表支付宝
    if (currentIndex.value === 1) {
      updateAlipay({ imgUrl: img }).then((res) => {
        if (res.code === ResultEnum.SUCCESS) {
          toast.value?.show({
            title: "上传成功",
          });
        }
        payment.alipay = img;

        alipayUploadRef.value?.clear();
      });
    } else {
      updateWxpay({ imgUrl: img }).then((res) => {
        if (res.code === ResultEnum.SUCCESS) {
          toast.value?.show({
            title: "上传成功",
          });
        }
        payment.wxpay = img;
        wxpayUploadRef.value?.clear();
      });
    }
  }
}

function tabClick(index: string | number) {
  currentIndex.value = Number(index);
}

function updateInfo(){
  findPayment().then((res) => {
    let result: Payment = res.result;
    if (result) {
      Object.assign(payment, result);
    }
  });
}

onShow(() => {
  updateInfo();
})

// onMounted(() => {
//   updateInfo();
// });
</script>

<style lang="scss" scoped>
body {
    background-color: #fff;
}
.payment {

  &-bank {
    padding: 0 20rpx;
    margin-top: 40rpx;
    .item {
      border-radius: 30rpx;
      padding: 20rpx;
      &-top-left {
        img {
          background-color: #fff;
          width: 100%;
          border-radius: 15rpx;
        }
      }
      &-top-right {
        justify-content: center;
        align-items: center;
        padding-left: 20rpx;
        .item-text {
          width: 100%;
        }
        .bank-name {
          font-size: 30rpx;
          padding-bottom: 10rpx;
        }
        .member-name {
          font-size: 14rpx;
        }
      }

      &-bottom {
        margin-top: 20rpx;
        font-size: 35rpx;
        text-align: end;
        .bank-no {
          margin-right: 50rpx;
        }
      }
    }
  }

  &-alipay,
  &-wx {
    padding: 0 20rpx;
  }
  .add-bank {
    text-align: center;
    margin-top: 30rpx;
  }
  .img-box {
    margin-top: 30rpx;
    padding: 30rpx;
    img {
      width: 100%;
    }
  }
}
</style>
